<template>
  <div :id="id"
       :style="chartStyle">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import echarts from "echarts";
import defaultImange from "./bgBlue.png";
@Component
export default class DdCircle extends Vue {
  myChart: any = null;
  // chart图表的总体样式 ，如宽 高 、background等
  @Prop({
    type: String,
    default: "width:600px;height:200px;"
  })
  chartStyle!: string;

  // echarts 所在的id
  @Prop({
    type: String,
    default() {
      let idStr = "";
      for (let i = 0; i < 6; i++) {
        let randomChar: string = String.fromCharCode(
          65 + Math.floor(Math.random() * 19) + i
        );
        idStr += randomChar;
      }
      return idStr;
    }
  })
  id!: string;

  // 鼠标悬移提示内边距
  @Prop({
    type: Array,
    default() {
      return [5, 10, 5, 10];
    }
  })
  tooltippadding!: any;

  // charts item  color,
  @Prop({
    type: Array,
    default() {
      return ["#5f9dff", "#6be1c1", "#ffd86e", "#ee5959", "#7d92d4"];
    }
  })
  itemColor!: any;

  // 提示框的位置 右边距
  @Prop({
    type: String,
    default: "0px"
  })
  toolboxRight!: string;

  // 提示框的位置 上边距
  @Prop({
    type: String,
    default: "10px"
  })
  toolboxTop!: string;

  // 是否显示下载图标
  @Prop({
    type: Boolean,
    default: true
  })
  showDownloadIcon!: boolean;

  // 下载后的文件名称
  @Prop({
    type: String,
    default: "DdCircle"
  })
  fileName!: string;

  // 图例数据项
  @Prop({
    type: Array,
    required: true,
    default: []
  })
  legendData!: any;

  // 圆圈图的数据
  @Prop({
    type: Array,
    required: true,
    default: function() {
      return [];
    }
  })
  seriesData!: any;

  // 下载图片的图片名称
  @Prop({
    type: String,
    default: "DdCircle图表"
  })
  seriesName!: string;

  // 鼠标悬浮的数据样式
  @Prop({
    type: String,
    default: "{b}: {c} ({d}%)"
  })
  formatter!: string;

  // 图例的位置 x轴位置
  @Prop({
    type: String,
    default: "80%"
  })
  legendX!: string;

  //  图例的位置 y轴的位置
  @Prop({
    type: String,
    default: "20%"
  })
  legendY!: string;

  // 圆圈的中心位置 第一个是 x 轴的位置， 第二个是y 轴的位置
  @Prop({
    type: Array,
    // require:true,
    default: function() {
      return ["40%", "50%"];
    }
  })
  center!: any;

  // 鼠标悬移过去后是否显示动画
  @Prop({
    type: Boolean,
    default: false
  })
  hoverAnimation!: boolean;

  // 监听正题样式变化 重新加载
  @Watch("chartStyle")
  getChartStyle() {
    this.myChart.resize();
  }

  // 监听数据变化 更新图样式
  @Watch("legendData")
  getLegendData() {
    this.draw();
  }

  // 监听数据变化 更新图样式
  @Watch("seriesData", { deep: true })
  getSeriesData() {
    this.draw();
  }

  mounted() {
    this.$nextTick(() => {
      this.draw();
    });
  }

  draw() {
    if (document.getElementById(this.id)) {
      this.myChart =
        this.myChart == null
          ? echarts.init(document.getElementById(this.id))
          : this.myChart;
      this.myChart.setOption({
        color: this.itemColor,

        tooltip: {
          padding: this.tooltippadding,
          trigger: "item",
          formatter: this.formatter,
          backgroundColor: "rgba(50, 50, 50, 0.7)",
          borderColor: "rgb(51, 51, 51)",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontFamily: "微软雅黑"
          }
        },
        toolbox: {
          right: this.toolboxRight,
          top: this.toolboxTop,
          show: this.showDownloadIcon,
          orient: "horizontal",
          itemGap: 10,
          showTitle: true,
          itemSize: 60,
          // iconStyle: {
          //   normal:{
          //     borderColor: '#5c6781'
          //   },
          //   emphasis:{
          //     borderColor: '#4990ff'
          //   }
          // },
          feature: {
            saveAsImage: {
              name: this.fileName,
              show: true,
              title: " ",
              icon: "image://" + defaultImange
            }
          }
        },
        legend: {
          orient: "vertical",
          x: this.legendX,
          y: this.legendY,
          data: this.legendData,
          icon: "circle",
          itemWidth: 9,
          textStyle: {
            fontFamily: "微软雅黑"
          }
        },
        series: [
          {
            name: "系统名称",
            type: "pie",
            radius: ["55%", "70%"],
            center: this.center,

            hoverAnimation: this.hoverAnimation,
            label: {
              normal: {
                show: false,
                position: "center",
                textStyle: {
                  fontFamily: "微软雅黑"
                }
              },
              emphasis: {
                formatter: "000",
                show: false,
                textStyle: {
                  fontSize: "18",
                  color: "gray",
                  fontWeight: "bold",
                  fontFamily: "微软雅黑"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.seriesData
          }
        ]
      });
      // this.myChart.resize();
      var _this = this;
      window.addEventListener("resize", function() {
        _this.myChart.resize();
      });
    }
  }
}
</script>  